<template>
	<view class="container">
		<view class="form-container">
			<view class="form-header">
				<view class="form-title">上传考察记录</view>
				<view class="form-subtitle">请认真填写考察信息</view>
			</view>
			
			<view class="form-content">
				<view class="form-item" :class="{ 'form-item-focus': isPickerFocused }">
					<text class="label">考察对象</text>
					<picker @change="bindPickerChange" :value="index" :range="userList" range-key="name">
						<view class="picker">
							<text>{{userList[index].name || '请选择考察对象'}}</text>
							<image class="picker-arrow" src="/static/icons/arrow-down.png"></image>
						</view>
					</picker>
				</view>
				
				<view class="form-item" :class="{ 'form-item-focus': isTypeFocused }">
					<text class="label">考察类型</text>
					<picker @change="bindTypeChange" :value="typeIndex" :range="typeList" range-key="label">
						<view class="picker">
							<text>{{typeList[typeIndex].label || '请选择考察类型'}}</text>
							<image class="picker-arrow" src="/static/icons/arrow-down.png"></image>
						</view>
					</picker>
				</view>
				
				<view class="form-item" :class="{ 'form-item-focus': isDateFocused }">
					<text class="label">记录日期</text>
					<view class="datetime-picker">
						<picker mode="date" :value="recordDate" @change="bindDateChange">
							<view class="picker date-picker">
								<text>{{formatDate(recordDate) || '请选择日期'}}</text>
								<image class="picker-arrow" src="/static/icons/arrow-down.png"></image>
							</view>
						</picker>
						<picker mode="time" :value="recordTime" @change="bindTimeChange">
							<view class="picker time-picker">
								<text>{{recordTime || '请选择时间'}}</text>
								<image class="picker-arrow" src="/static/icons/arrow-down.png"></image>
							</view>
						</picker>
					</view>
				</view>
				
				<view class="form-item" :class="{ 'form-item-focus': isCheckerFocused }">
					<text class="label">考察人</text>
					<input type="text" v-model="checker" placeholder="请输入考察人姓名" 
						@focus="isCheckerFocused = true" @blur="isCheckerFocused = false" />
				</view>
				
				<view class="form-item" :class="{ 'form-item-focus': isScoreFocused }">
					<text class="label">评分</text>
					<view class="slider-container">
						<slider 
							:value="inspectionScore" 
							@change="handleScoreChange"
							:min="0"
							:max="100"
							:step="1"
							show-value
							activeColor="#ff7a45"
							backgroundColor="#e9ecef"
							block-size="28"
							@focus="isScoreFocused = true"
							@blur="isScoreFocused = false"
						/>
						<view class="score-labels">
							<text>0</text>
							<text>50</text>
							<text>100</text>
						</view>
					</view>
				</view>
				
				<view class="form-item" :class="{ 'form-item-focus': isConclusionFocused }">
					<text class="label">结论</text>
					<picker @change="bindConclusionChange" :value="conclusionIndex" :range="conclusionList" range-key="label">
						<view class="picker">
							<text>{{conclusionList[conclusionIndex].label || '请选择结论'}}</text>
							<image class="picker-arrow" src="/static/icons/arrow-down.png"></image>
						</view>
					</picker>
				</view>
				
				<view class="form-item" :class="{ 'form-item-focus': isContentFocused }">
					<text class="label">考察内容</text>
					<textarea v-model="inspectionContent" placeholder="请输入考察内容" 
						@focus="isContentFocused = true" @blur="isContentFocused = false" />
				</view>
				
				<view class="form-item" :class="{ 'form-item-focus': isAdviceFocused }">
					<text class="label">问题建议</text>
					<textarea v-model="advice" placeholder="请输入问题建议" 
						@focus="isAdviceFocused = true" @blur="isAdviceFocused = false" />
				</view>
			</view>
			
			<button class="submit-btn" @click="submitForm" :class="{ 'submit-btn-loading': isSubmitting }">
				<text v-if="!isSubmitting">提交</text>
				<view v-else class="loading-spinner"></view>
			</button>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { contactGetUser,userInfoAsync,uploadInspection } from '@/common/js/api.js';

// 表单数据
const userList = ref([]);
const index = ref(0);
const typeList = ref([
	{ value: 1, label: '政治素质' },
	{ value: 2, label: '群众评议' },
	{ value: 3, label: '组织评议' },
	{ value: 4, label: '综合考察' }
]);
const typeIndex = ref(0);
const recordDate = ref('');
const recordTime = ref('');
const checker = ref('');
const inspectionScore = ref('');
const conclusionList = ref([
	{ value: 1, label: '通过' },
	{ value: 2, label: '有条件通过' },
	{ value: 3, label: '不通过' },
	{ value: 4, label: '暂缓通过' }
]);
const conclusionIndex = ref(0);
const conclusion = ref('');
const inspectionContent = ref('');
const advice = ref('');

// 输入框焦点状态
const isPickerFocused = ref(false);
const isTypeFocused = ref(false);
const isDateFocused = ref(false);
const isCheckerFocused = ref(false);
const isScoreFocused = ref(false);
const isConclusionFocused = ref(false);
const isContentFocused = ref(false);
const isAdviceFocused = ref(false);
const isSubmitting = ref(false);
const userId = ref();

// 选择器事件处理
const bindPickerChange = (e) => {
	index.value = e.detail.value;
};

const bindTypeChange = (e) => {
	typeIndex.value = e.detail.value;
};

// 格式化日期
const formatDate = (dateStr) => {
	if (!dateStr) return '';
	const date = new Date(dateStr);
	const year = date.getFullYear();
	const month = String(date.getMonth() + 1).padStart(2, '0');
	const day = String(date.getDate()).padStart(2, '0');
	return `${year}-${month}-${day}`;
};

// 处理日期选择
const bindDateChange = (e) => {
	recordDate.value = e.detail.value;
};

// 处理时间选择
const bindTimeChange = (e) => {
	recordTime.value = e.detail.value;
};

// 获取用户列表
const fetchUserList = async () => {
	const resp = await contactGetUser(userId.value);
	const userIdList = resp.data;
	for (var i = 0;i<userIdList.length;++i){
		const userInfo = await userInfoAsync(userIdList[i]);
		if(userInfo.data.user == null) {
			continue;
		}
		userList.value.push(userInfo.data.user);
	}
}

// 处理评分变化
const handleScoreChange = (e) => {
	inspectionScore.value = e.detail.value;
};

// 处理结论选择
const bindConclusionChange = (e) => {
	conclusionIndex.value = e.detail.value;
	conclusion.value = conclusionList.value[conclusionIndex.value].value;
};

// 表单提交
const submitForm = async () => {
	// 表单验证
	if (!userList.value[index.value]) {
		uni.showToast({
			title: '请选择考察对象',
			icon: 'none'
		});
		return;
	}
	if (!recordDate.value || !recordTime.value) {
		uni.showToast({
			title: '请选择完整的日期和时间',
			icon: 'none'
		});
		return;
	}
	if (!checker.value) {
		uni.showToast({
			title: '请输入考察人',
			icon: 'none'
		});
		return;
	}
	if (!inspectionScore.value || inspectionScore.value < 0 || inspectionScore.value > 100) {
		uni.showToast({
			title: '请输入有效评分(0-100)',
			icon: 'none'
		});
		return;
	}
	if (!conclusion.value) {
		uni.showToast({
			title: '请选择结论',
			icon: 'none'
		});
		return;
	}
	if (!inspectionContent.value) {
		uni.showToast({
			title: '请输入考察内容',
			icon: 'none'
		});
		return;
	}

	isSubmitting.value = true;

	// 构建提交数据
	const formData = {
		userId: userList.value[index.value].id,
		status: typeList.value[typeIndex.value].value,
		recordDate: `${recordDate.value} ${recordTime.value}:00`,
		checker: checker.value,
		inspectionScore: Number(inspectionScore.value),
		conclusion: conclusion.value,
		inspectionContent: inspectionContent.value,
		advice: advice.value
	};
	
	console.log(formData);

	try {
		const res = await uploadInspection(formData);
		if (res.code === 200) {
			uni.showToast({
				title: '提交成功',
				icon: 'success',
				duration: 1500,
				success: () => {
					setTimeout(() => {
						uni.navigateBack();
					}, 1500);
				}
			});
		} else {
			uni.showToast({
				title: res.msg || '提交失败',
				icon: 'none'
			});
		}
	} catch (error) {
		console.error('提交失败:', error);
		uni.showToast({
			title: '提交失败',
			icon: 'none'
		});
	} finally {
		isSubmitting.value = false;
	}
};

// 重置表单
const resetForm = () => {
	index.value = 0;
	typeIndex.value = 0;
	recordDate.value = '';
	recordTime.value = '';
	checker.value = '';
	inspectionScore.value = '';
	conclusionIndex.value = 0;
	conclusion.value = '';
	inspectionContent.value = '';
	advice.value = '';
};

onMounted(() => {
	userId.value = uni.getStorageSync('userId');
	fetchUserList();
});
</script>

<style lang="scss">
.container {
	min-height: 100vh;
	background: linear-gradient(135deg, #f6f7f9, #e9ecef);
	padding: 30rpx;
	box-sizing: border-box;
}

.form-container {
	background-color: #fff;
	border-radius: 24rpx;
	padding: 40rpx 30rpx;
	box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.08);
	animation: slideUp 0.5s ease-out;
}

.form-header {
	text-align: center;
	margin-bottom: 50rpx;
	
	.form-title {
		font-size: 40rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 16rpx;
	}
	
	.form-subtitle {
		font-size: 26rpx;
		color: #666;
	}
}

.form-content {
	.form-item {
		margin-bottom: 36rpx;
		transition: all 0.3s ease;
		
		&.form-item-focus {
			transform: translateY(-2rpx);
			
			.label {
				color: #ff7a45;
			}
			
			input, textarea, .picker {
				border-color: #ff7a45;
				background-color: #fff;
				box-shadow: 0 2rpx 12rpx rgba(255, 122, 69, 0.1);
			}
		}
		
		.label {
			display: block;
			font-size: 28rpx;
			color: #333;
			margin-bottom: 16rpx;
			font-weight: 500;
			transition: color 0.3s ease;
		}
		
		input {
			width: 100%;
			height: 88rpx;
			background-color: #f8f9fa;
			border: 2rpx solid #e9ecef;
			border-radius: 16rpx;
			padding: 0 24rpx;
			font-size: 28rpx;
			color: #333;
			box-sizing: border-box;
			transition: all 0.3s ease;
			
			&::placeholder {
				color: #adb5bd;
			}
		}
		
		textarea {
			width: 100%;
			height: 200rpx;
			background-color: #f8f9fa;
			border: 2rpx solid #e9ecef;
			border-radius: 16rpx;
			padding: 24rpx;
			font-size: 28rpx;
			color: #333;
			box-sizing: border-box;
			transition: all 0.3s ease;
			
			&::placeholder {
				color: #adb5bd;
			}
		}
		
		.picker {
			width: 100%;
			height: 88rpx;
			background-color: #f8f9fa;
			border: 2rpx solid #e9ecef;
			border-radius: 16rpx;
			padding: 0 24rpx;
			font-size: 28rpx;
			color: #333;
			line-height: 88rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			transition: all 0.3s ease;
			
			.picker-arrow {
				width: 32rpx;
				height: 32rpx;
				opacity: 0.5;
			}
		}
		
		.slider-container {
			background-color: #f8f9fa;
			border: 2rpx solid #e9ecef;
			border-radius: 16rpx;
			padding: 30rpx 24rpx 20rpx;
			transition: all 0.3s ease;
			
			&:hover {
				border-color: #ff7a45;
				background-color: #fff;
				box-shadow: 0 2rpx 12rpx rgba(255, 122, 69, 0.1);
			}
			
			.slider {
				margin: 0;
			}
			
			.score-labels {
				display: flex;
				justify-content: space-between;
				margin-top: 12rpx;
				padding: 0 10rpx;
				
				text {
					font-size: 24rpx;
					color: #666;
				}
			}
		}
		
		.datetime-picker {
			display: flex;
			gap: 20rpx;
			
			.date-picker {
				flex: 2;
			}
			
			.time-picker {
				flex: 1;
			}
		}
	}
}

.submit-btn {
	width: 100%;
	height: 88rpx;
	background: linear-gradient(135deg, #ff7a45, #ff9c6e);
	border-radius: 44rpx;
	color: #fff;
	font-size: 32rpx;
	font-weight: 500;
	margin-top: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	box-shadow: 0 4rpx 16rpx rgba(255, 122, 69, 0.3);
	
	&:active {
		transform: translateY(2rpx);
		box-shadow: 0 2rpx 8rpx rgba(255, 122, 69, 0.2);
	}
	
	&.submit-btn-loading {
		opacity: 0.8;
		pointer-events: none;
	}
	
	.loading-spinner {
		width: 40rpx;
		height: 40rpx;
		border: 4rpx solid rgba(255, 255, 255, 0.3);
		border-top: 4rpx solid #fff;
		border-radius: 50%;
		animation: spin 0.8s linear infinite;
	}
}

@keyframes slideUp {
	from {
		opacity: 0;
		transform: translateY(30rpx);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

// 自定义滑块样式
:deep(.uni-slider-handle) {
	background-color: #ff7a45 !important;
	box-shadow: 0 2rpx 8rpx rgba(255, 122, 69, 0.3) !important;
}

:deep(.uni-slider-track) {
	background-color: #ff7a45 !important;
}

:deep(.uni-slider-value) {
	color: #ff7a45 !important;
	font-weight: 500 !important;
}
</style> 